import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Button } from '@tarojs/components'
import { postcss } from '@utils/style'
import jump from '@utils/jump'
import homeIcon from '@assets/home.png'
import serviceIcon from '@assets/service.png'
import cartIcon from '@assets/cart.png'
import './index.scss'

export default class Footer extends Component {
  static defaultProps = {
    onBuy: () => {},
    onAdd: () => {}
  }

  handleNav = (url) => {
    jump({ url: url, method: 'switchTab' })
  }

  render () {
    return (
      <View className='item-footer'>
        <View key='home' className='item-footer__nav' onClick={this.handleNav.bind(this, '/pages/home/home')}>
          <Image className='item-footer__nav-img' src={homeIcon} />
          <Text className='item-footer__nav-txt'>首页</Text>
        </View>
        <View key='contact' className='item-footer__nav'>
          <Image className='item-footer__nav-img' src={serviceIcon} />
          <Text className='item-footer__nav-txt'>客服</Text>
        </View>
        <View key='cart' className='item-footer__nav' onClick={this.handleNav.bind(this, '/pages/cart/cart')}>
          <Image className='item-footer__nav-img' src={cartIcon} />
          <Text className='item-footer__nav-txt'>购物车</Text>
        </View>


        <Button
          className='item-footer__btn item-footer__btn-cart'
          onClick={this.props.onAdd}
        >
          <Text className='item-footer__btn-txt'>加入购物车</Text>
        </Button>

        <Button
          className='item-footer__btn item-footer__btn-buy'
          onClick={this.props.onBuy}
        >
          <Text className='item-footer__btn-txt'>立即购买</Text>
        </Button>

      </View>
    )
  }
}
